﻿@model SMECustomerWebsite.Models.ViewModels.AdminChecklist.DocumentChecklistViewModel
<ul id="menu_product_handbook_detail" class="nav nav-tabs bar_tabs sme-tabs" role="tablist">
    @*
        <li role="presentation" class="">
            @Html.ActionLink(@SMECustomerWebsite.Core.Resources.Resource.ProHandbookProDetailInfoTab, "ProductDetail", "ProductHandbook", new { productid = Request.QueryString["productid"] }, null)
        </li>*@
    <li role="presentation" class="active">
        @Html.ActionLink(@SMECustomerWebsite.Core.Resources.Resource.ProHandbookProDetailChecklistTab, "Checklist", "ProductHandbook", new { productid = Request.QueryString["productid"] }, null)
    </li>
</ul>

<!--Modal  question -->
<div class="modal fade cm-celebration-representative-info" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                @{
                    List<SelectListItem>
                        listItems = new List<SelectListItem>
                            ();
                    listItems.Add(new SelectListItem
                    {
                        Text = "Yes",
                        Value = "x",
                        Selected = true
                    });
                    listItems.Add(new SelectListItem
                    {
                        Text = "No",
                        Value = ""
                    });
                }
                <div class="col-md-12 profile_details">
                    <div class="well profile_view">
                        <div class="x_content form-horizontal form-label-left">
                            @using (Html.BeginForm("DocumentChecklist", "AdminChecklist", FormMethod.Post, new { @class = "" }))
                            {
                                @Html.HiddenFor(m => m.productInfo.ProductId);
                                @Html.HiddenFor(m => m.documentEdit.SubProductId, new { id = "subProductIdHiddent" });
                                @Html.HiddenFor(m => m.documentEdit.PictureDoc, new { id = "picSampleHidden" });
                                @Html.HiddenFor(m => m.documentEdit.Id, new { id = "documentIdHidden" })
                                <div class="col-md-12 col-md-offset-6">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                    <button type="submit" class="btn btn-primary" id="save_change_document" onclick="return updateDataSubmit();">Save changes</button>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12">
                                        @SMECustomerWebsite.Core.Resources.Resource.AdminChecklistDocumentTab
                                    </label>
                                    <div class="col-md-9 col-sm-9 col-xs-12">
                                        @Html.TextAreaFor(m => m.documentEdit.DocumentGroupCategory, new { enctype = "multipart/form-data", id = "checklistDocGroupCat", required = "required", @class = "form-control", rows = "3" })
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12">
                                        @SMECustomerWebsite.Core.Resources.Resource.AdminChecklistDocumentTab
                                    </label>
                                    <div class="col-md-9 col-sm-9 col-xs-12">
                                        @Html.TextAreaFor(m => m.documentEdit.DocumentGroup, new { enctype = "multipart/form-data", id = "checklistDocGroup", required = "required", @class = "form-control", rows = "3" })
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12">
                                        @SMECustomerWebsite.Core.Resources.Resource.AdminChecklistDocumentTab
                                    </label>
                                    <div class="col-md-9 col-sm-9 col-xs-12">
                                        @Html.TextAreaFor(m => m.documentEdit.Document, new { enctype = "multipart/form-data", id = "checklistDoc", required = "required", @class = "form-control", rows = "3" })
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12">
                                        @SMECustomerWebsite.Core.Resources.Resource.ChecklistOrigiHeader
                                    </label>
                                    <div class="col-md-9 col-sm-9 col-xs-12">
                                        @Html.DropDownListFor(m => m.documentEdit.Original, listItems, new { id = "checklistOri", required = "required", @class = "form-control" })
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12">
                                        @SMECustomerWebsite.Core.Resources.Resource.ChecklistCopyHeader
                                    </label>
                                    <div class="col-md-9 col-sm-9 col-xs-12">
                                        @Html.DropDownListFor(m => m.documentEdit.Copy, listItems, new { id = "checklistCop", required = "required", @class = "form-control" })
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12">
                                        @SMECustomerWebsite.Core.Resources.Resource.ChecklistDupHeader
                                    </label>
                                    <div class="col-md-9 col-sm-9 col-xs-12">
                                        @Html.DropDownListFor(m => m.documentEdit.Duplicate, listItems, new { id = "checklistDup", required = "required", @class = "form-control" })
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-md-3 col-sm-3 col-xs-12">
                                        @SMECustomerWebsite.Core.Resources.Resource.ChecklistNoteHeader
                                    </label>
                                    <div class="col-md-9 col-sm-9 col-xs-12">
                                        @Html.TextAreaFor(m => m.documentEdit.Note, new { enctype = "multipart/form-data", id = "checklistNote", @class = "form-control", rows = "3" })
                                    </div>
                                </div>
                            }

                            <div class="form-group">
                                <label class="control-label col-md-3 col-sm-3 col-xs-12">
                                    @SMECustomerWebsite.Core.Resources.Resource.ChecklistSamplePhotoHeader
                                </label>
                                <div class="col-md-9 col-sm-9 col-xs-12">
                                    <form action="~/AdminChecklist/SaveUploadedFile" method="post" enctype="multipart/form-data" class="dropzone" id="dropzoneForm" style="background: none;">
                                        <div class="fallback">
                                            <input name="file" type="file" multiple />
                                            <input type="submit" value="Upload" />
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<!-- /modals -->


<div class="row">
    <div class="col-md-12">
        <div class="x_panel">
            <div class="x_title">
                <h2>CHECKLIST CUSTOMER</h2>
                <ul class="nav navbar-right panel_toolbox">
                    <li>
                        <a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                    </li>
                </ul>
                <div class="clearfix"></div>
            </div>
            <div class="x_content">
                @Html.Action("SubMenuAdminChecklistDetail", "System")

                <!--question checklist-->
                <div id="div_question_checklist" class="row">
                    <div class="x_panel">
                        <div class="x_title">
                            <h2>@SMECustomerWebsite.Core.Resources.Resource.ChecklistQuestionTitle</h2>
                            <ul class="nav navbar-right panel_toolbox">
                                <li>
                                    <a onclick="return addChecklistDocument();"><i class="fa fa-plus-square"></i></a>
                                </li>
                                <li>
                                    <a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                </li>
                            </ul>
                            <div class="clearfix"></div>
                        </div>
                        <div class="x_content">
                            <div class="" role="tabpanel" data-example-id="togglable-tabs">
                                <ul id="myTab" class="nav nav-tabs bar_tabs sme-tabs" role="tablist">
                                    <li role="presentation" class="">
                                        @Html.ActionLink(Model.productInfo.ListSubProduct.FirstOrDefault().SubProductNameEn, "DocumentChecklist", "AdminChecklist", new { productid = Request.QueryString["productid"] }, null)
                                    </li>
                                    <li role="presentation" class="active">
                                        @Html.ActionLink(Model.productInfo.ListSubProduct.LastOrDefault().SubProductNameEn, "DocumentChecklistA2", "AdminChecklist", new { productid = Request.QueryString["productid"] }, null)
                                    </li>
                                </ul>
                                <table id="checklist_document_a2" class="custom_table table table-striped jambo_table fixed_header_tab2">
                                    <thead>
                                        <tr class="headings">
                                            <th class="column-title">Hồ sơ </th>
                                            <th class="column-title">Bản gốc</th>
                                            <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.ChecklistDocumentHeader.ToUpper()</th>
                                            <th class="column-title">@SMECustomerWebsite.Core.Resources.Resource.ChecklistOrigiHeader.ToUpper()</th>
                                            <th class="column-title" data-toggle="tooltip" data-placement="top" title="" data-original-title="@SMECustomerWebsite.Core.Resources.Resource.ChecklistCopyHeaderTooltip">@SMECustomerWebsite.Core.Resources.Resource.ChecklistCopyHeader.ToUpper()</th>
                                            <th class="column-title" data-toggle="tooltip" data-placement="top" title="" data-original-title="@SMECustomerWebsite.Core.Resources.Resource.ChecklistDuplicateHeaderTooltip">@SMECustomerWebsite.Core.Resources.Resource.ChecklistDupHeader.ToUpper()</th>
                                            <th class="column-title" width="30%">@SMECustomerWebsite.Core.Resources.Resource.ChecklistNoteHeader.ToUpper()</th>
                                            <th class="column-title last">@SMECustomerWebsite.Core.Resources.Resource.ChecklistSamplePhotoHeader.ToUpper()</th>
                                            <th class="column-title last">@SMECustomerWebsite.Core.Resources.Resource.ActionHeader</th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
<!-- End to do list -->
@section scripts
{
    <!-- Add fancyBox main JS and CSS files -->
    <script type="text/javascript" src="~/Scripts/vendors/fancyImage/jquery.fancybox.js"></script>
    <link rel="stylesheet" type="text/css" href="~/Scripts/vendors/fancyImage/jquery.fancybox.css" media="screen" />
    <!-- Dropzone.js -->
    <script src="~/Scripts/dropzone/dropzone.min.js"></script>
    <script type="text/javascript">
        var thisDropzone
        function editDocument(docid) {
            thisDropzone.removeAllFiles();
            $("div.dz-preview.dz-image-preview").remove();
            $.ajax({
                url: '@Url.Action("DocInfo", "AdminChecklist")',
                type: "POST",
                data: { docId: docid },
                success: function (data_response) {
                    if (data_response != null) {
                        data_response['duplicate'] = data_response['duplicate'] == '' || data_response['duplicate'] == null ? data_response['duplicate'] : data_response['duplicate'].trim();
                        $("#subProductIdHiddent").val('@Model.productInfo.ListSubProduct.FirstOrDefault().SubProductId');
                        $('#documentIdHidden').val(docid);
                        $('#checklistDoc').text(data_response['document']);
                        $('#checklistNote').text(data_response['note']);
                        $('#checklistDocGroup').text(data_response['docGroup']);
                        $('#checklistDocGroupCat').text(data_response['docGroupCat']);
                        $("select#checklistOri").val(data_response['original']);
                        $("select#checklistCop").val(data_response['copy']);
                        $("select#checklistDup").val(data_response['duplicate']);
                        $("#picSampleHidden").val(data_response['pictureSample'])
                        var pictureSample = data_response['pictureSample'];
                        if (pictureSample != null) {
                            var arrPic = pictureSample.split(",");
                            //var arrFancy = [];
                            arrPic.forEach(function (entry) {
                                var mockFile = { name: entry, size: 12345 };
                                // Call the default addedfile event handler
                                thisDropzone.emit("addedfile", mockFile);

                                // And optionally show the thumbnail of the file:
                                thisDropzone.emit("thumbnail", mockFile, '/Scripts/vendors/fancyImage/@Model.productInfo.ProductId/' + entry);

                            });
                        };
                    }
                }
            })
            $('.cm-celebration-representative-info').modal('show');
            return false;
            //e.preventDefault()
        }
        $(document).ready(function () {
            //File Upload response from the server
            Dropzone.options.dropzoneForm = {
                acceptedFiles: "image/*",
                init: function () {
                    thisDropzone = this;
                    this.on("sending", function (file, xhr, formData) {
                        formData.append("ProductId", @Model.productInfo.ProductId);
                    });
                    this.on("complete", function (data) {
                        //var res = eval('(' + data.xhr.responseText + ')');
                        var res = JSON.parse(data.xhr.responseText);
                    });
                },
                uploadMultiple: true,
                addRemoveLinks: true,
                removedfile: function (file) {
                    var _ref;
                    return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
                }
            }
            var visibleColumn = [0, 1];
            var table_a2 = $('#checklist_document_a2').DataTable({
                bFilter: false,
                bInfo: false,
                bPaginate: false,
                "responsive": true,
                "bAutoWidth": false,
                "order": [[0, 'asc']],
                "bServerSide": true,
                //"bProcessing": true,
                "sAjaxSource": '@Html.Raw(Url.Action("ChecklistDocumentData", "AdminChecklist", new { productid = Model.productInfo.ProductId, routing = Model.productInfo.ListSubProduct.LastOrDefault().SubProductId }))',
                "fnServerData": function (sSource, aoData, fnCallback) {
                    $.ajax({
                        "dataType": 'json',
                        "type": "POST",
                        "url": sSource,
                        "data": aoData,
                        "success": fnCallback
                    });
                },
                fixedHeader: true,
                "aoColumns": [
                            { "sName": "CIF", "className": 'column-title', "bSortable": false },
                            { "sName": "NAME", "className": 'column-title', "bSortable": false },
                            { "sName": "CIF", "bSortable": false },
                            { "sName": "NAME", "className": 'column-title', "bSortable": false },
                            { "sName": "VPB INDUSTRY", "className": 'column-title', "bSortable": false },
                            { "sName": "DATE OPEN", "className": 'column-title', "bSortable": false },
                            { "sName": "VPB INDUSTRY", "bSortable": false },
                            { "sName": "DATE OPEN", "className": 'column-title', "bSortable": false },
                            { "sName": "VPB INDUSTRY", "className": 'column-title', "bSortable": false }],
                "columnDefs": [{
                    "sClass": "a-center ",
                    "aTargets": 6,
                    "mRender": function (data, type, full) {
                        if (data != null && data.length > 50) {
                            return '<span class="teaser">' + data.substring(0, 50) + '</span><span class="complete" id="complete' + full[8] + '">' + data.substring(50, data.length) + '</span><span id="more' + full[8] + '" class="more"  onclick=\"showMore(\'' + full[8] + '\' );\">...(more)</span>';
                        } else {
                            return data;
                        }

                    }
                }, {
                    "sClass": "a-center ",
                    "aTargets": 7,
                    "mRender": function (data, type, full) {
                        if (data != null && data.length > 0) {
                            return '<a class="btn btn-primary btn-xs" onclick="showDocumentPicture(\'' + full[7] + '\');"><i class="fa fa-eye"></i></a>';
                        } else {
                            return data;
                        }
                    }
                }, {
                    "sClass": "a-center ",
                    "aTargets": 8,
                    "mRender": function (data, type, full) {
                        if (data != null && data.length > 0) {
                            return '<a class="btn btn-primary btn-xs" onclick="editDocument(\'' + full[8] + '\');"><i class="fa fa-edit"></i></a>';
                        } else {
                            return data;
                        }
                    }
                }, {
                    "visible": false, "targets": visibleColumn
                }],
                "drawCallback": function (settings) {
                    var api = this.api();
                    var rows = api.rows({ page: 'current' }).nodes();
                    var last = null;

                    api.column(0, { page: 'current' }).data().each(function (group, i) {
                        if (last !== group) {
                            $(rows).eq(i).before(
                                '<tr class="smes_parent"><td colspan="27">' + group + '</td></tr>'
                            );
                            last = group;
                        }
                    });
                    api.column(1, { page: 'current' }).data().each(function (group, i) {
                        if (last !== group && group != null) {
                            $(rows).eq(i).before(
                                '<tr class="smes_parent"><td colspan="27">' + group + '</td></tr>'
                            );
                            last = group;
                        }
                    });
                }
            });
            table_a2.fixedHeader.enable();
        });

        function addChecklistDocument() {
            $("#subProductIdHiddent").val('@Model.productInfo.ListSubProduct.LastOrDefault().SubProductId');
            $('#checklistDocGroup').text('');
            $('#checklistDocGroupCat').text('');
            $('#documentIdHidden').val('0');
            $('#checklistDoc').text('');
            $('#checklistNote').text('');
            $("select#checklistOri").val('');
            $("select#checklistCop").val('');
            $("select#checklistDup").val('');
            $('.cm-celebration-representative-info').modal('show');
        }
        function updateDataSubmit() {
            var $partType = $("#dropzoneForm").find('div.dz-filename');
            var str = "";

            $partType.find('span').each(function () {
                str += $(this).text() + ",";
            })
            str = str.substr(0, str.length - 1);
            $("#picSampleHidden").val(str);
            return true;
        };
        //show document image
        function showDocumentPicture(picName) {
            var arrPic = picName.split(",");
            var arrFancy = [];
            arrPic.forEach(function (entry) {
                arrFancy.push({
                    href: '/Scripts/vendors/fancyImage/@Model.productInfo.ProductId/' + entry
                })
            });
            $.fancybox.open(arrFancy, {
                helpers: {
                    thumbs: {
                        width: 75,
                        height: 50
                    }
                }
            });
        };

        function showMore(id) {
            if ($("#more" + id + "").text() == "...(more)") {
                $("#complete" + id + "").show();
                $("#more" + id + "").text(" (less)");
            } else {
                $("#complete" + id + "").hide();
                $("#more" + id + "").text("...(more)");
            }
        }
    </script>
    <script type="text/javascript">

    </script>
}
